<template>
  <div><h1>测试页面</h1>
    <div>
      <router-link to="/">首页</router-link>
    </div>
    <div>
      <div>Context状态</div>
      <h2>渲染模式：{{ mode }}</h2>
      <h2>{{ mode2 }}</h2>
      <div>{{ homeInfo }}</div>
    </div>
    <div>
      <span>{{ count }}</span>
    </div>
    <div>
      <button @click="count++">+1</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count: 2
      // mode: process.env.VUE_ENV === 'server' ? '服务端渲染模式' : '客户端渲染模式'
      // mode2:'1234567890',
    }
  },
  serverRequest (store) {
    console.log('Test.vue serverRequest (store)')
    return store.dispatch('getHomeInfo')
  },
  mounted () {},
  computed: {
    homeInfo () {
      console.log('Test.vue compute homeInfo ()')
      return this.$store.state.homeInfo
    },
    mode () {
      console.log('Test.vue compute mode ()')
      return ' 输出显示 ' + this.$store.state.homeInfo
    },
    mode2 () {
      console.log('Test.vue compute mode2 ()')
      return this.$store.state.homeInfo
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
a {
  color: #ec1212;
}
</style>
